<div class="row">
	<table class="col s12 bordered highlight responsive-table">
		<caption>table title and/or explanatory text</caption>
		<thead>
			<tr>
				<th>header</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>data</td>
			</tr>
		</tbody>
	</table>
	<div class="row">
		<div class="col s12 m9 l10">
			<div id="introduction" class="section scrollspy">
				<p>Content </p>
			</div>

			<div id="structure" class="section scrollspy">
				<p>Content </p>
			</div>

			<div id="initialization" class="section scrollspy">
				<p>Content </p>
			</div>
		</div>
		<div class="col hide-on-small-only m3 l2">
			<ul class="section table-of-contents">
				<li><a href="#introduction">Introduction</a></li>
				<li><a href="#structure">Structure</a></li>
				<li><a href="#initialization">Intialization</a></li>
			</ul>
		</div>
	</div>
	<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

	<!-- Dropdown Structure -->
	<ul id='dropdown1' class='dropdown-content'>
		<li><a href="#!">one</a></li>
		<li><a href="#!">two</a></li>
		<li class="divider"></li>
		<li><a href="#!">three</a></li>
	</ul>
	<ul class="pagination">
		<li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
		<li class="active"><a href="#!">1</a></li>
		<li class="waves-effect"><a href="#!">2</a></li>
		<li class="waves-effect"><a href="#!">3</a></li>
		<li class="waves-effect"><a href="#!">4</a></li>
		<li class="waves-effect"><a href="#!">5</a></li>
		<li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
	</ul>

	<ul class="tabs tabs-transparent">
		<li class="tab"><a href="#test1">Test 1</a></li>
		<li class="tab"><a class="active" href="#test2">Test 2</a></li>
		<li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
		<li class="tab"><a href="#test4">Test 4</a></li>
	</ul>
</div>